<template>
  <div class="dTable">
    <table style="width: 100%;">
      <thead>
        <tr>
          <th style="width: 13%">
            <div class="cell">
              {{$t('list_table_th_Ranking')}}</div>
          </th>
          <th style="width: 24%">
            <div class="cell">
              {{$t('list_table_th_Tools')}}
            </div>
          </th>
          <th style="width: 28%">
            <div class="cell">
              {{ $t('list_table_th_Introduction') }}
            </div>
          </th>
          <th style="width: 17%">
            <div class="cell">
              {{ $t('list_table_th_MonthlyVisit') }}
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="el-table__row"
          v-for="(row, key) in tableData"
          :key="key">
          <td>
            <div class="cell">
              <img class="w-8"
                src="@/assets/images/no1.png"
                v-if="(key + pageKey * pageDataNum)===0" />
              <img class="w-8"
                src="@/assets/images/no2.png"
                v-if="(key + pageKey * pageDataNum)===1" />
              <img class="w-8"
                src="@/assets/images/no3.png"
                v-if="(key + pageKey * pageDataNum)===2" />
              <div v-if="(key + pageKey * pageDataNum)>=3"
                class="text-center">
                {{ key+1 + pageKey * pageDataNum }}
              </div>
            </div>
          </td>
          <td>
            <div class="cell">
              <common-link path="/tool/:handle"
                :params="{ handle:row.handle }"
                class="text-base text-gray-1000 font-semibold hover:text-purple-1300 go-tool"
                target="_blank">
                {{$websiteName(row)}}
              </common-link>
            </div>
          </td>
          <td>
            <div class="cell">
              <p class="text-sm text-gray-1500 break-words tool-desc leading-7 text-left"
                :title="row.description">
                {{row.description}}
              </p>
            </div>
          </td>
          <td>
            <div class="cell">
              <span class="text-base text-gray-1000"
                v-if="isCatagory">
                {{ row.month_visited_count | vResetVisit }}
              </span>
              <span class="text-base text-gray-1000"
                v-if="isRegion">
                {{ ($route.params.region && row.traffic ?row.traffic.region_monthly_visits:row.month_visited_count) | vResetVisit }}
              </span>
              <span class="text-base text-gray-1000"
                v-if="isSource">
                {{ ($route.params.source && handle && row.traffic ?row.traffic[`monthly_visits_${handle}`]:row.month_visited_count) | vResetVisit }}
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DownloadTable02',
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      },
    },
    pageDataNum: {
      type: Number,
      default: 10,
    },
    pageKey: {
      type: Number,
      default: 0,
    },
    isCatagory: {
      type: Boolean,
      default: false,
    },
    isRegion: {
      type: Boolean,
      default: false,
    },
    isSource: {
      type: Boolean,
      default: false,
    },
    handle: {
      type: String | null,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val ? val : 0
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
  },
  methods: {
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.dTable {
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  table {
    td,
    th {
      box-sizing: border-box;
      min-width: 0;
      padding: 12px 0;
      position: relative;
      text-align: left;
      text-overflow: ellipsis;
      vertical-align: middle;
      .cell {
        box-sizing: border-box;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        vertical-align: middle;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }
      &:first-child {
        .cell {
          padding-left: 22px;
          text-align: center;
        }
      }
      &:last-child {
        .cell {
          padding-right: 22px;
          text-align: center;
        }
      }
    }
    thead {
      tr {
        th {
          background: #7150e6;
          color: #fff;
          font-weight: 400;
          border-bottom: 1px solid #e5e5e5;
          & + th {
            border-left: 1px solid #e5e5e5;
          }
        }
      }
    }
    tbody {
      tr {
        td {
          border-bottom: 1px solid #e5e5e5;
          color: #191919;
          font-size: 16px;
          padding-bottom: 10px;
          padding-top: 10px;
          & + td {
            border-left: 1px solid #e5e5e5;
          }
        }
        &:nth-child(even) {
          background: #f8f9fb;
        }
        &:last-child {
          td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
